import React from 'react'
import {Modal,Form, Input, message,Select} from 'antd'
import{SmileOutlined,UnderlineOutlined,BulbOutlined} from '@ant-design/icons';
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { updatePowerActionAsync,LoadPowerActionAsync } from '../../../redux/action/powerAction';
const { Option } = Select;
function UpdatePower(props) {
  const [params,setParams] = React.useState({})
  const handleParams=()=>{
    props.PowerList.map((val,i)=>{
      if(val.key===props.selectedRowKey[0])
      {
        PowerUpdateForm.setFieldsValue(val)
        setParams({key:val.key})
      }
      return null
    })
  }
  const [PowerUpdateForm]=Form.useForm()
  React.useEffect(() => {
    handleParams()
  },[props.selectedRowKey])
  return (
    <div>
      <Modal 
        title="编辑角色信息" 
        visible={props.visible} 
        onOk={async ()=>{
          let fieldsValue = await PowerUpdateForm.validateFields()
          fieldsValue.status=props.status
          fieldsValue = {...fieldsValue,...params}
          props.updatePowerActionAsync(fieldsValue)
          props.close()
          props.LoadPowerActionAsync()
          message.success('修改成功!')
        }} 
        onCancel={props.close}
        okText='确定'
        cancelText='取消'
        >
        <Form  
          layout="horizontal"
          form={PowerUpdateForm}
          name="PowerUpdateForm"
        >
          <Form.Item
              name="des"
              label="权限描述"
              rules={[
                {
                  pattern:/^.+$/,
                  message: '请输入字符!',
                },
                {
                  required: true,
                  message: '请输入权限描述(权限名)!',
                },
              ]}
            >
              <Input prefix={<SmileOutlined />} placeholder='权限名'/>
          </Form.Item>
          <Form.Item
              name="powerType"
              label="权限类型"
              rules={[
                {
                  required: true,
                },
              ]}
              initialValue='menu'
            >
            <Select style={{ width: '30%' }}>
              <Option value='menu'>menu</Option>
              <Option value='file'>file</Option>
            </Select>
          </Form.Item>
          <Form.Item
              name="url"
              label="url地址&nbsp;&nbsp;&nbsp;"
              rules={[
                {
                  pattern:/^.+$/,
                  message: '请输入字符!',
                },
                {
                  required: true,
                  message: '请输入url!',
                },
              ]}
            >
              <Input prefix={<UnderlineOutlined />} placeholder='url'/>
          </Form.Item>
          <Form.Item
              name="code"
              label="权限码&nbsp;&nbsp;&nbsp;"
              rules={[
                {
                  pattern:/^.+$/,
                  message: '请输入字符!',
                },
                {
                  required: true,
                  message: '请输入权限码!',
                },
              ]}
            >
              <Input prefix={<BulbOutlined />} placeholder='权限码'/>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    PowerList:state.powerList
	}),
	{updatePowerActionAsync,LoadPowerActionAsync}
)(UpdatePower)

